<template>
	<view class="container">
		<u-navbar title-size="34" title="更改手机号" back-icon-color="#292940" title-color="#292940" :border-bottom="false"
			placeholder :custom-back="tui.goBack"></u-navbar>
		<view class="container-phone">
			<view class="text-999BA8 fz-26">绑定手机号后，下次登录可使用手机号登录。</view>
			<view class="item">
				<label class="text-36363A fz-32">旧手机号码</label>
				<u-input v-model="USER.mobile" class="input-box" disabled :custom-style="customStyle"
					style="padding: 6px 0;" label-width="0" type="number" maxlength="11"
					placeholder-style="color:#E2E2E5;font-size:32upx" clear-size="32" :border="false">
				</u-input>
			</view>
			<view class="item">
				<label class="text-36363A fz-32">验证码</label>
				<u-input v-model="old_verification_code" class="input-box" style="padding: 6px 80px 6px 0" clearable 
					label-width="0" placeholder="请输入验证码" placeholder-style="color:#E2E2E5;font-size:32upx"
					:border="false" clear-size="32" type="number" maxlength="6">
				</u-input>
				<span class="get-code" @tap="getOldCode">{{oldtips}}</span>
			</view>
			<view class="item">
				<label class="text-36363A fz-32">新手机号码</label>
				<u-input v-model="mobile" class="input-box" style="padding: 6px 0;" clearable label-width="0"
					placeholder="请输入新手机号码" type="number" maxlength="11"
					placeholder-style="color:#E2E2E5;font-size:32upx" clear-size="32" :border="false">
				</u-input>
			</view>
			<view class="item">
				<label class="text-36363A fz-32">验证码</label>
				<u-input v-model="verification_code" class="input-box" style="padding: 6px 80px 6px 0" clearable
					label-width="0" placeholder="请输入验证码" placeholder-style="color:#E2E2E5;font-size:32upx"
					:border="false" clear-size="32"  type="number" maxlength="6">
				</u-input>
				<span class="get-code" @tap="getCode">{{tips}}</span>
			</view>
			<view class="but-box phone-bth">
				<u-button class="main-bg family-sc fz-36" hover-class="none" :loading="loading" @click="changeMobile">更换</u-button>
			</view>
		</view>
		<u-verification-code ref="uCodeOld" seconds="60" @end="endOld" @start="startOld" @change="codeOldChange" changeText="Xs获取"></u-verification-code>
		<u-verification-code ref="uCode" seconds="60" @end="end" @start="start" @change="codeChange" changeText="Xs获取"></u-verification-code>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				mobile: '', //手机号
				verification_code: '', //新验证码
				old_verification_code:'',//旧验证按摩
				tips: '发送验证码',
				oldtips: '发送验证码',
				customStyle: {
					color: '#CCCDD5'
				},
				loading:false
			}

		},
		computed: {
			USER() {
				return this.$store.state.auth.USER
			}
		},
		methods: {
			endOld(){},
			startOld(){},
			end(){},
			start(){},
			codeOldChange(text) {
				this.oldtips = text
			},
			codeChange(text) {
				this.tips = text
			},
			//绑定手机
			changeMobile() {
				if(this.old_verification_code == ''){
					return uni.$u.toast('请输入旧验证码')
				}
				if(this.mobile == ''){
					return uni.$u.toast('请输入新手机号')
				}
				if(!uni.$u.test.mobile(this.mobile)){
					return uni.$u.toast('新手机号格式不正确')
				}
				if(this.verification_code == ''){
					return uni.$u.toast('请输入新手机验证码')
				}
				let param = {
					mobile:this.mobile,
					verification_code:this.verification_code,
					old_verification_code:this.old_verification_code
				}
				this.loading = true
				this.$store.dispatch('auth/changeBindMobile', param).then(res => {
					this.loading = false
					uni.$u.toast('更换成功')
					this.$store.dispatch('auth/user').then(res => {
						setTimeout(() => {
							uni.redirectTo({
								url:'/pages/setting/account-security'
							})
						}, 1000)
					})
				}).catch(error=>{
					this.loading = false
				})
			},
			getOldCode(){
				if (this.$refs.uCodeOld.canGetCode) {
						this.$store.dispatch('auth/smsSendOwn', { mobile: this.USER.mobile }).then(res => {
							uni.$u.toast('验证码已发送');
							this.$refs.uCodeOld.start();
						}).catch(error => {
							uni.$u.toast(error.data.message)
						})
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			getCode() {
				if (this.$refs.uCode.canGetCode) {
					//进行表单检查
					let checkRes = uni.$u.test.mobile(this.mobile)
					if (checkRes) {
						this.$store.dispatch('auth/smsSend', { mobile: this.mobile,type:1 }).then(res => {
							uni.$u.toast('验证码已发送');
							this.$refs.uCode.start();
						}).catch(error => {
							uni.$u.toast(error.data.message)
						})
					} else {
						uni.$u.toast('请输入正确的手机号')
					}
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			}
		}
	}
</script>

<style>

</style>
<style lang="scss" scoped>
	.container {
		width: 100%;
		min-height: 100vh;
		background-color: #ffffff;
	}

	.container-phone {
		width: 100%;
		padding: 40upx 30upx;
		box-sizing: border-box;
	}

	.item {
		height: 182upx;
		box-sizing: border-box;
		padding-top: 50upx;
		border-bottom: 1upx solid rgba(216, 222, 228, .8);
		position: relative;

		/deep/.u-border-bottom {
			border-color: #0ABD82 !important;
		}
	}

	.input-box {
		width: 100%;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		text-align: left;

		input {
			height: 96upx;
			width: calc(100% - 180upx) !important;
			font-size: 32upx;
			color: #2c2c2c;
		}
	}


	.but-box {
		width: 100%;
		padding: 80upx 0;

		button {
			width: 100%;
			height: 100upx;
			border-radius: 50upx;
			line-height: 95upx;
			font-size: 32upx;
			color: #FFFFFF;
		}

		uni-button:after {
			border: none !important;
		}
	}

	.get-code {
		position: absolute;
		right: 0;
		top: 77%;
		transform: translateY(-50%);
		color: #292940;

	}
</style>
